<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>vue生命周期</title>
	</head>

	<body>
		<div id="app">
			<h2>vue生命周期</h2>
			<hr />
			<p>{{num}}</p>
			<p><button @click="add">add</button></p>
			<p><button onclick="vm.$destroy()">销毁</button></p>
		</div>
		<script src="../assets/js/vue.min.js"></script>
		<script type="text/javascript">
			var vm = new Vue({
				el: '#app',
				data: {
					num: '1'
				},
				methods: {
					add: function() {
						this.num++;
					}
				},
				beforeCreate: function() {
					console.log('1-beforeCreate 初始化之前');	//读取数据 beforeCreate
				},
				created: function() {
					console.log('2-created 创建完成');			//显示数据 created    加载动画
				},
				beforeMount: function() {
					console.log('3-beforeMount 挂载之前');		//挂载 beforeMount
				},
				mounted: function() {
					console.log('4-mounted 被挂载之后');			//挂载之后 mounted    结束加载动画
				},
				beforeUpdate: function() {
					console.log('5-beforeUpdate 数据更新前');   	//
				},
				updated: function() {
					console.log('6-updated 被更新后');
				},
				activated: function() {
					console.log('7-activated');
				},
				deactivated: function() {
					console.log('8-deactivated');
				},
				beforeDestroy: function() {
					console.log('9-beforeDestroy 销毁之前');
				},
				destroyed: function() {
					console.log('10-destroyed 销毁之后')
				}
			})
		</script>
	</body>

</html>